<template>
  <div id="home">
    <!--      顶部区域-->
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <scroll class="contents" ref="scroll" :probe-type="3" @scroll="contentScroll" :pull-up-load="true" @pullingUp="loadMore">
      <!--    轮播图区域-->
      <home-swiper :banner-list="bannerList" />
      <!--    轮播图下推荐链接区域-->
      <recommend-view :recommend-list="recommendList" />
      <!--    推荐大图-->
      <feature />
      <!--    流行 新款 精选 控制栏-->
      <tab-control class="tab-control" :titles="titles" @tabClick="tabClick"/>
      <!--    展示商品数据-->
      <goods-list :goods="showGoods"/>
    </scroll>

    <back-top class="top" @click.native="backTop" v-show="isShowBackTop"/>
  </div>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar";
  import HomeSwiper from "./childComps/HomeSwiper";
  import RecommendView from "./childComps/RecommendView";

  import Feature from "./childComps/Feature";

  import TabControl from "components/content/tabControl/TabControl";
  import GoodsList from "components/content/goods/GoodsList";
  import Scroll from "components/common/scroll/Scroll";
  import BackTop from "components/content/backtop/BackTop";


  import {getHomeMultidata,getHomeGoods} from "network/home";
  import {debounce} from "common/utils";

  export default {
    name: "Home",
    components:{
      NavBar,HomeSwiper,RecommendView,Feature,TabControl,GoodsList,Scroll,BackTop
    },
    data(){
      return {
        bannerList:[],
        recommendList:[],
        currentType:'pop',
        // 首页 tabcontrol
        titles:[
          '流行','新款','精选'
        ],
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]}
        },
        isShowBackTop:false
      }
    },
    created() {
      this.getHomeMultidata()

      // 请求pop数据
      this.getHomeGoods('pop')
      // 请求new数据
      this.getHomeGoods('new')
      // 请求sell数据
      this.getHomeGoods('sell')
    },
    computed:{
      showGoods(){
        return this.goods[this.currentType].list
      }
    },
    mounted() {
      const refresh = debounce(this.$refs.scroll.refresh,100)

      this.$bus.$on('itemImgLoad',()=>{
        refresh()
      })
    },
    methods:{
      /*
      * 网络请求相关方法
      * */

      getHomeMultidata(){
        getHomeMultidata().then(res => {
          this.bannerList = res.data.banner.list
          this.recommendList = res.data.recommend.list
        })
      },

      // 根据 type 请求商品数据
      getHomeGoods(type){
        const page = this.goods[type].page + 1
        getHomeGoods(type,page).then(res => {
          // console.log(res)
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page += 1

          this.$refs.scroll.finishPullUp()
        })
      },


      /*
      * 事件监听相关方法
      * */
      //监听子组件 TabControl 传递过来的方法
      tabClick(index){
        switch (index){
          case 0:
            this.currentType='pop'
                break
          case 1:
            this.currentType='new'
            break
          case 2:
            this.currentType='sell'
            break
        }
      },
      // 返回顶部
      backTop(){
        this.$refs.scroll.scrollTo(0,0,500)
      },
      contentScroll(position){
         (-position.y) > 1000 ? this.isShowBackTop = true :this.isShowBackTop = false
      },

      // 下拉加载更多
      loadMore(){
        this.getHomeGoods(this.currentType)
      }

    }
  }
</script>

<style scoped>
#home{
  /*padding-top: 44px;*/
  /*padding-bottom: 49px;*/
  height: 100vh;
  position: relative;
}
.home-nav{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  background: var(--color-tint);
  color: #fff;
}
.tab-control{
  position: sticky;
  top: 44px;
  margin-bottom: 5px;
}
.contents{
  position: absolute;
  top: 44px;
  bottom: 49px;
  right: 0;
  left: 0;
}

.top{
  position: fixed;
  right: 10px;
  bottom: 55px;

}
</style>
